<template>
  <div class="top-bar">
    <div class="wrap">
      <div class="l">欢迎来到叩丁狼积分商城</div>
      <div class="r">
        <ul>
          <li>
            <img
              @click="clickAvatar"
              class="avatar"
              :src="userInfo.headImg"
              width="23px"
              alt=""
            />
            用户名：{{ userInfo.nickName }}
          </li>
          <li>游客</li>
          <li>我的积分：{{ userInfo.coin }}</li>
          <li>获取积分</li>
          <li>叩丁狼官网</li>
          <li class="cart-btn btn" v-show="isLogined">
            <img src="../assets/img/cart.png" alt="" />
            <span @click="toCart">购物车</span>
            <b>{{ cartTotal }}</b>
          </li>
          <li
            class="login-btn btn"
            v-show="!isLogined"
            @click="chanisShowLoginMadal(true)"
          >
            登录
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from "vuex";
import { WeixinLoginApi } from "../../request/api";
export default {
  data() {
    return {};
  },
  // 微信登录第二步
  created() {
    this.setUserLoginState();
  },
  // 监听路由跳转  一旦跳转就会执行 setUserLoginState函数，没有token就会恢复未登录状态
  // 还有第二种方式，组件重载：就不需要监听了，在app中给组件添加key属性，监听key值变化重载组件  执行一遍生命周期函数
  // watch: {
  //   "$route.path": {
  //     handler(newval, oldval) {
  //       console.log(newval, oldval);
  //       this.setUserLoginState();
  //     },
  //   },
  // },
  methods: {
    setUserLoginState() {
      let mycode = this.$route.query.code;
      if (mycode) {
        WeixinLoginApi({
          code: this.$route.query.code,
        }).then((res) => {
          if (res.code == 0) {
            // 登录成功之后的逻辑
            // 1.提示登录成功
            this.asyncchanisshowToast({
              msg: "登录成功!",
              type: "success",
            });
            // 2.保存token值
            localStorage.setItem("x-auth-token", res["x-auth-token"]);
            // 3.隐藏登录展示购物车
            this.chanisLogined(true);
            // 4.删除url上的code
            this.$router.push(this.$route.path);
            // 5.获取渲染用户信息
            this.asyncUpdateUserInfo();
          } else {
            this.asyncchanisshowToast({
              msg: res.message,
              type: "danger",
            });
          }
        });
      } else {
        // 没有code，说明没有扫码，或者用户已经登录了，不用扫码了
        // 判断有没有token，设置登录状态
        let token = localStorage.getItem("x-auth-token");
        // 设置登录状态 ：为什么设置登录状态，一位内topbar上面的信息，需要靠有没有登录来展示的
        this.chanisLogined(Boolean(token));

        if (token) {
          // 加载这个topbar组件的时候，就需要获取用户信息
          // 所以发起请求，请求用户信息
          this.asyncUpdateUserInfo();
        } else {
          // 恢复未登录状态默认数据
          this.infouserInfo();
        }
      }
    },
    ...mapMutations({
      chanisShowLoginMadal: "isShowLogin/chanisShowLoginMadal",
      chanisshowToast: "toastStatus/chanisshowToast",
      chanisLogined: "loginStatus/chanisLogined",
      changeuserinfo: "userinfo/changeuserinfo",
      infouserInfo: "userinfo/infouserInfo",
    }),
    ...mapActions({
      asyncchanisshowToast: "toastStatus/asyncchanisshowToast",
      asyncUpdateUserInfo: "userinfo/asyncUpdateUserInfo",
    }),
    // 头像点击事件，触发提示文本
    clickAvatar() {
      let token = localStorage.getItem("x-auth-token");
      if (token) {
        return;
      }
      // this.chanisshowToast({
      //   isShow: true,
      //   msg: "成功啦!",
      //   type: "success",
      // });
      // // 两秒后再次调用传递一个false 关闭提示文本
      // setTimeout(() => {
      //   this.chanisshowToast({
      //     isShow: false,
      //     msg: "成功啦!",
      //     type: "success",
      //   });
      // }, 2000);

      // 直接调用封装好的mapActions里面的asyncchanisshowToast方法，代码优化
      this.asyncchanisshowToast({
        msg: "请先登录!",
        type: "danger",
      });
    },
    // 购物车按钮
    toCart() {
      this.$router.push("/user/cart");
    },
  },
  computed: {
    ...mapState({
      // 购物车与登录按钮开关
      isLogined: (state) => state.loginStatus.isLogined,
      cartTotal: (state) => state.userinfo.cartTotal,
      userInfo: (state) => state.userinfo.userInfo,
    }),
  },
};
</script>
 
<style lang = "less" scoped>
@import url("../assets/css/public.less");
.top-bar {
  height: 40px;
  background: #242b39;
  .wrap {
    height: 40px;
    display: flex;
    /* 主轴两端靠齐 */
    justify-content: space-between;
    /* 侧轴居中 */
    align-items: center;
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fffefe;
    .r ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: 20px;
        .avatar {
          border-radius: 50%;
          margin-right: 5px;
        }
        /* 选择到有.login-btn类的li标签 */
        &.btn {
          width: 124px;
          height: 40px;
          background: @color;
          display: flex;
          justify-content: center;
        }
        &.cart-btn {
          align-items: center;
          span {
            margin: 0 5px;
          }
          b {
            width: 22px;
            height: 22px;
            line-height: 22px;
            background-color: #fd604d;
            border-radius: 50%;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>